<template>
  <el-container>
    <el-header style="display: flex; align-items: center;">
      <el-button @click="toggleSidebar" icon="custom-menu-icon" circle></el-button>
    </el-header>
    <el-container>
      <el-aside width="200px" v-if="isSidebarVisible" class="sidebar">
        <el-menu @select="handleMenuSelect" default-active="1-1">
          <el-menu-item index="1-1">合同管理</el-menu-item>
          <el-menu-item index="1-2">查询统计</el-menu-item>
          <el-menu-item index="1-3">合同客户信息管理</el-menu-item>
          <el-menu-item index="1-4">系统管理</el-menu-item>
        </el-menu>
      </el-aside>
      <el-main class="content">
        <div v-if="isContractManagement">
          <h2>合同管理系统</h2>
          <!-- 合同管理系统内容 -->
          <div>
                 <el-button @click="showDraftContract" type="primary">起草合同</el-button>
                 <el-button @click="showCounterSignContract" type="success">会签合同</el-button>
                 <el-button @click="showFinalizeContract" type="warning">定稿合同</el-button>
                 <el-button @click="showApproveContract" type="danger">审批合同</el-button>
                 <el-button @click="showSignContract" type="info">签订合同</el-button>
                 </div>
        </div>
        <div v-if="isSystemManagement">
          <h2>系统管理</h2>
          <div>
            <el-button @click="showAllocateContract" type="primary">分配合同</el-button>
            <el-button @click="showUserManagement" type="success">用户管理</el-button>
            <el-button @click="showRoleManagement" type="warning">角色管理</el-button>
            <el-button @click="showFunctionOperation" type="danger">功能操作</el-button>
            <el-button @click="showAllocatePermission" type="info">分配权限</el-button>
          </div>
        </div>
        <div v-if="isCustomerContract">
                  <h2>合同客户信息管理</h2>
                  <div>
                                     <el-button @click="showContractManagement" type="primary">合同信息管理</el-button>
                                                        <el-button @click="showCustomerManagement" type="success">客户信息管理</el-button>
                  </div>
                </div>
        <div v-if="isQuery">
                          <h2>查询统计</h2>
                          <div>
                <el-button @click="ContractInformationQuery" type="primary">合同信息查询</el-button>
                                                    <el-button @click="ContractProcessQuery" type="success">合同流程查询</el-button>
                          </div>
                        </div>
        <!-- 其他视图内容 -->
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      isSidebarVisible: false,
      isContractManagement: false,
      isSystemManagement: false,
      isCustomerContract: false
    };
  },
  methods: {
    toggleSidebar() {
      this.isSidebarVisible = !this.isSidebarVisible;
    },
    handleMenuSelect(key, keyPath) {
      switch (key) {
        case '1-1':
          this.isContractManagement = true;
          this.isSystemManagement = false;
             this.isCustomerContract = false;
               this.isQuery = false;
          break;
           case '1-2':
                    this.isQuery = true;
                    this.isSystemManagement = false;
                       this.isCustomerContract = false;
                         this.isContractManagement = false;
                    break;
          case '1-3':
                    this.isCustomerContract = true;
                    this.isSystemManagement = false;
                      this.isContractManagement = false;
                         this.isQuery = false;
                    break;
        case '1-4':
           this.isSystemManagement = true;
          this.isContractManagement = false;

               this.isCustomerContract = false;
                this.isQuery = false;
          break;
        default:
          this.isContractManagement = false;
          this.isSystemManagement = false;
          break;
      }
    },
    showAllocateContract(){
         console.log("分配合同");
      this.$router.push('/pendingContractList');
    },
     showDraftContract() {
          console.log("起草合同");
  this.$router.push('/draft_contract');
        },
     showCounterSignContract(){
       this.$router.push('/countersign_contract');
     },
     showFinalizeContract(){
          this.$router.push('/finalize_contract');
     },
     showApproveContract(){
           this.$router.push('/approve_contract');
     },
     showSignContract(){
     this.$router.push('/sign_contract');
     },
    showCustomerManagement() {
      console.log("客户管理");
      this.$router.push('/customer');
    },
      showUserManagement() {
          console.log("用户管理");
          // 处理用户管理的逻辑
          this.$router.push('/user');
        },
    showRoleManagement() {
      console.log("角色管理");
      // 处理角色管理的逻辑
      // 进入 \role 页面的代码
      this.$router.push('/role');
    },
    showFunctionOperation() {
      console.log("功能操作");
      // 处理功能操作的逻辑
    },
    showAllocatePermission() {
      console.log("分配权限");
      this.$router.push('/right');
    },
    showContractManagement(){
      console.log("合同信息");
          this.$router.push('/ContractIfo');
    },
    ContractInformationQuery(){
        this.$router.push('/query_contract_information');

        },
        ContractProcessQuery(){
           this.$router.push('/query_contract_process');
        }
  }
};
</script>

<style>
#app {
  height: 100vh;
}
.sidebar {
  width: 200px;
  background-color: #f8f9fa;
}
.content {
  flex-grow: 1;
  padding: 20px;
}
</style>
